<template>

    <el-card class="box-card">
        <template #header>
            <div class="card-header">

                <el-button color="#409EFF" :dark="false" class="button"
                @click="openDialog">
                    <span>添加分类</span>
                </el-button>
            </div>
        </template>

        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
            <el-table-column type="index" label="#" width="50" />
            <el-table-column prop="cat_name" label="分类名称" width="261" />
            <el-table-column prop="cat_deleted" label="是否有效" width="258" />
            <el-table-column prop="cat_level" label="排序" width="258" />

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)" type="primary">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="demo-pagination-block">
            <div class="demonstration"></div>
            <el-pagination 
                v-model:currentPage="currentPage" 
                v-model:page-size="pageSize"
                :page-sizes="[2, 5, 8, 10]" 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="tableData.length" 

                @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

    </el-card>

    <!-- 弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="添加商品分类"
    width="30%"
  >
  <el-form>
      <el-form-item label="分类名称" :label-width="formLabelWidth">
        <el-input  autocomplete="off" />
      </el-form-item>
      <el-form-item label="父级分类" :label-width="formLabelWidth">
        <el-input  autocomplete="off" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref , reactive,onMounted } from "vue";
import {getGoodType} from "@/api/good";

interface User {
    id: string;
    name: string;
    address: string;
    sort: string;
}

const currentPage = ref(1);
const pageSize = ref(2);

// 一页显示多少条
const handleSizeChange = (val: number) => {
    pageSize.value = val
};

// 当前页数
const handleCurrentChange = (val: number) => {
    currentPage.value = val
};

const handleEdit = (index: number, row: User) => {
    console.log(index, row);
};

const handleDelete = (index: number, row: User) => {
    console.log(index, row);
};

const tableData: User[] = reactive([]);

// 接口
const getGood = async ()=>{
    let res = await getGoodType({
        pagenum:currentPage.value,
        pagesize:pageSize.value
    })
    console.log(res.data.data.result)
    tableData.push(...res.data.data.result)
}
getGood()

// 控制弹出窗显示
const dialogVisible = ref(false)
const formLabelWidth = '120px'

const openDialog = ()=>{
    dialogVisible.value = true
}

</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
    height: auto;
}

.button {
    color: #fff;
    margin-top: 10px;
    height: 40px;
    width: 90px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.el-button {
    width: 75px;
    height: 30px;
}

.el-icon {
    margin-right: 5px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-button--text {
  margin-right: 15px;
}
.el-input {
  width: 300px;
}
</style>
